<template>
	<view class="mainpadding2">
		<u-sticky bgColor="#fafafa">
			<view style="padding-top: 30rpx;" class="flexbetween">
				<u--input prefixIcon="search" shape="circle" prefixIconStyle="font-size: 22px;color: #909399"
					placeholder="請輸入蒐索內容" v-model="keyname" @confirm="searchGoods"></u--input>
				<view class="" @click="getCode()">
					<u-icon name="scan" color="#ffb800" size="28"></u-icon>
				</view>
			</view>
			<u-tabs lineColor="#FFB800" lineWidth="15" :current="tabcurrent" :activeStyle="{
			             color: '#000000',
			             fontWeight: 'bold',
			             transform: 'scale(1.05)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(1)'
			         }" :list="tabList" @click="tabclick" @change="tabChage"></u-tabs>
			<view class="flexbetween" style="padding: 30rpx 30rpx 0;background-color: #fafafa;">
				<view class="flexcenter" @click="jumpurl('/pages/workbench/classifyScreen')">
					<view class="hui_text main_size bold">分類篩選</view>
				</view>
				<view class="flexcenter" @click="selectCom">
					<view :class="type==0?'hei_text main_size bold':'hui_text main_size bold'">綜合排序</view>
				</view>
				<view class="flexcenter" @click="selectSale">
					<view :class="(type==1||type==2)?'hei_text main_size bold':'hui_text main_size bold'">銷量排序</view>
					<view class="flexcolumn">
						<view :class="type==2?'checkshang':'nocheckshang'"></view>
						<view :class="type==1?'checkxia':'nocheckxia'" style="margin-top: 5rpx;"></view>
					</view>
				</view>
				<view class="flexcenter" @click="selectPrice">
					<view :class="(type==3||type==4)?'hei_text main_size bold':'hui_text main_size bold'">價格排序</view>
					<view class="flexcolumn">
						<view :class="type==4?'checkshang':'nocheckshang'"></view>
						<view :class="type==3?'checkxia':'nocheckxia'" style="margin-top: 5rpx;"></view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="" style="padding-bottom: 150rpx;">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;"></view>
			</view>
			<view class="mainpadding_top  ffffff radius" style="position: relative;" v-for="(item,index) in list.data"
				:key="item.id">
				<view class="fuwulable">{{item.id}}</view>
				<view class="flexleft">
					<view class="listleftimg radius margin_right" @click="uploadImg(index)">
						<image class="radius" :src="item.logoimage" mode=""></image>
						<view class="mengban">切換圖片</view>
					</view>
					<view style="width: 100%;">
						<view class="hei_text main_size bold">{{item.name}}</view>
						<view class="xiaohui margin_top2" v-if="item.is_grounding==1">上架時間 {{item.date}}</view>
						<view class="xiaohui margin_top2" v-if="item.is_grounding==0">下架時間 {{item.enddate}}</view>
						<view class="flexleft">
							<view class="borderhui margin_top2 margin_right1 flexleft radius" style="padding: 10rpx;">
								<view class="xiaohei main_size" style="min-width: 90rpx;">價格：</view>
								<view class="flexbetween" style="width: 100%;">
									<input type="number" class="xiaohong main_size" v-model="item.new_price" @blur="pricechange(item.new_price,index)"/>
									<view class="" @click="item.new_price=''">
										<u-icon name="close-circle-fill" color="#ff0000" size="16"></u-icon>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
				<view class="flexbetween">
					<view class="borderhuang margin_top2 flexleft radius" style="padding: 10rpx;width: 65%;">
						<view class="xiaohei main_size" style="min-width:140rpx;">國際條碼：</view>
						<view class="flexbetween" style="width: 100%;">
							<input type="text" class="xiaohuang main_size" v-model="item.barcode"
								@blur='barcodechange(item.barcode,index)' name="" id="">
							<u-icon name="scan" color="#feb800" size="28" @click="saoma(index)"></u-icon>
						</view>
					</view>
					<view class="borderhuang margin_top2 margin_left1 flexleft radius" style="padding: 13rpx;width: 35%;">
						<view class="xiaohei main_size" style="min-width: 90rpx;">權重：</view>
						<view class="flexbetween" style="width: 100%;">
							<input type="number" class="xiaohong main_size" v-model="item.weigh" @blur="weighchange(item.weigh,index)"/>
							<view class="" style="height: 40rpx;" @click="item.weigh=''">
								<image src="@/static/image/system/topUp.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				showEdit: false,
				tabList: [],
				tabsId: 1,
				shop_id: uni.getStorageSync("shop_id"),
				pid: 0, //当前分类id
				shopclassify_id: "", //分类id
				type: 0, //排序类型默认0，1=销量降，2-=销量升，3=价格降 4=价格升
				keyname: "", //商品名称
				page: 1,
				list: {
					data: []
				},
				isGet: false,
				id: "", //要刪除的商品id
				flag: false, //是否允许整体编辑,
				// classname:""
				tabcurrent: 0,
				currentIndedx: 0
			}
		},
		watch: {
			keyname(newVal, oldVal) {
				if (!newVal) {
					this.flag = false
				}
			}
		},
		onLoad() {
			uni.$on("returnCode", data => {
				this.keyname = data
				this.page = 1
				this.getGoodsList()
			})
			uni.$on("screentext", data => {
				this.shopclassify_id = ""
				this.keyname = data
				this.page = 1
				this.getGoodsList()
			})
			uni.$on("ywmcode", data => {
				this.list.data[this.currentIndedx].barcode = data
				this.changeGoodsOther({
					id: this.list.data[this.currentIndedx].id, //商品id
					shop_id: this.shop_id,
					barcode: data, //条形碼
				})
			})
			this.getGoodsCate()
		},
		onUnload() {
			uni.$off("ywmcode")
			uni.$off("returnCode")
			uni.$off("screentext")
		},
		onShow() {
			this.$nextTick(() => {
				// 解决uview u-tab，下划线异常
				this.tabcurrent = 0
			});
			this.page = 1
			this.getGoodsList()
		},
		methods: {
			uploadImg(index) { //上传图片
				let _this = this;
				uni.showActionSheet({
					itemList: ['相機', '相册'],
					success: function(res) {
						// 选择相機走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i],index)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i],index)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url,index) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.list.data[index].logoimage = image_item
					this.changeGoodsOther({
						id: this.list.data[index].id, //商品id
						shop_id: this.shop_id,
						logoimage: res.url,
					})
				}).catch(err => {});
			},
			pricechange(val, index) {
				this.changeGoodsOther({
					id: this.list.data[index].id, //商品id
					shop_id: this.shop_id,
					price: val,
				})
			},
			weighchange(val, index){
				this.changeGoodsOther({
					id: this.list.data[index].id, //商品id
					shop_id: this.shop_id,
					weigh: val,
				})
			},
			barcodechange(val, index) {
				this.changeGoodsOther({
					id: this.list.data[index].id, //商品id
					shop_id: this.shop_id,
					barcode: val,
				})
			},
			saoma(index) {
				this.currentIndedx = index
				uni.navigateTo({
					url: "/pages/workbench/scanywcode"
				})
			},
			changeGoodsOther(data) {
				this.http.request('/api/goods/editGoodsInfoField', 'POST', data).then(res => {})
			},
			getCode() {
				uni.navigateTo({
					url: "/pages/my/getcodetwm"
				})
			},
			getGoodsCate() { //商品分类
				let _this = this
				this.http.request('/api/shop/shopCategory', 'POST', {
					shop_id: this.shop_id, //店鋪id
				}).then(res => {
					if (res.code == 1) {
						this.tabList = res.data
						this.tabList.unshift({
							name: "全部",
							id: ""
						})
						this.isGet = true
					} else {
						this.http.toast(res.msg)
					}
				})

			},
			async getGoodsList(isPage, page) { //商品列表
				let _this = this
				let shopclassify_id = this.shopclassify_id == "" ? [] : this.shopclassify_id.split(",")
				let category_id = shopclassify_id.length == 0 ? "" : shopclassify_id[shopclassify_id.length - 1] ==
					"" ? shopclassify_id[
						shopclassify_id.length - 2] : shopclassify_id[shopclassify_id.length - 1]
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				let res = await this.http.request('/api/goods/listGoods', 'POST', {
					page: page || 1,
					limit: 12,
					shop_id: this.shop_id, //店鋪id
					shopclassify_id: category_id,
					type: this.type, //排序类型默认0，1=销量降，2-=销量升，3=价格降 4=价格升
					name: this.keyname, //商品名称
				})
				uni.hideLoading()
				if (res.code == 1) {
					let logoimage_text = []
					res.data.data.forEach(item => {
						item.logoimage = this.imgUrlUser + item.logoimage
					})
					let resList = res.data;
					let dataList = _this.list;
					if (isPage == true) {
						_this.list.data = dataList.data.concat(resList.data);
					} else {
						this.list = res.data
						_this.list.data = resList.data;
					}
				}
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getGoodsList(true, page);
			},
			searchGoods() { //搜索商品
				if (this.keyname) {
					this.flag = true
				}
				this.page = 1
				this.getGoodsList()
			},
			selectCom() { //综合排序
				this.type = 0
				this.page = 1
				this.getGoodsList()
			},
			selectSale() { //销量排序
				this.type = this.type == 1 ? 2 : 1
				this.page = 1
				this.getGoodsList()
			},
			selectPrice() { //价格排序
				this.type = this.type == 3 ? 4 : 3
				this.page = 1
				this.getGoodsList()
			},
			async grounding(item, type) { //商品上下架
				let date = new Date()
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				month = month < 10 ? '0' + month : month
				let day = date.getDate();
				day = day < 10 ? '0' + day : day
				let time = `${year}-${month}-${day}`
				console.log(time);
				// return
				let res = await this.http.request('/api/goods/startGoods', 'POST', {
					id: item.id, //商品id
					type: type, //1=上架，2-=下架
					time: time, //上架/下架時間
				})
				if (res.code == 1) {
					this.http.toast("操作成功")
					this.page = 1
					this.getGoodsList()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			tabclick(e) {
				this.tabcurrent = e.index
			},
			tabChage(e) {
				this.shopclassify_id = e.id + ","
				this.page = 1
				this.getGoodsList()
			},
			jumpurl(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-input__content__clear {
		color: #ff0000 !important;
	}

	.borderhui {
		border: 1rpx solid rgba(50, 60, 160, .1);
	}

	.borderhuang {
		border: 1rpx solid #feb800;
	}

	.mengban {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10rpx;
		box-sizing: border-box;
		background-color: #999999;
		color: #fff;
		font-size: 20rpx;
		text-align: center;
	}

	.posibottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.popupBox {
		width: 587rpx;
		height: 504rpx;
		background: #FAFAFA;
		border-radius: 30rpx 30rpx 30rpx 30rpx;

		.text_36 {
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}

		.allEdit {
			width: 386rpx;
			height: 85rpx;
			background: #ffb800;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin: 60rpx auto 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.allRemove {
			width: 386rpx;
			height: 85rpx;
			background: #ffffff;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin: 30rpx auto 0;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2rpx solid #ffb800;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffb800;
		}
	}
</style>